<template>
  <div class="change-mobile">
    <div class="wrap">
      <m-step :steps="steps" :active="active" />
    </div>
    <div class="content">
      <div class="input-area with-cover" v-if="active === 0">
        <Form
          :model="formData"
          ref="form"
          :rules="rules"
          label-position="left"
          label-width="120px"
        >
          <Row>
            <Col>
              <img
                src="~/assets/images/security-mobile-number.png"
                alt=""
                class="icon"
              />
              <form-item label="手机号码：" prop="phone">
                <Input
                  v-model="formData.phone"
                  maxlength="11"
                  placeholder="请输入手机号码"
                  type="text"
                />
              </form-item>
            </Col>
          </Row>
          <Row>
            <Col :span="18">
              <img
                src="~/assets/images/security-send-verification-code.png"
                alt=""
                class="icon"
              />
              <form-item label="手机验证码：" prop="sms_code">
                <Input
                  v-model="formData.sms_code"
                  placeholder="请输入手机验证码"
                  type="text"
                />
              </form-item>
            </Col>
            <Col :span="6">
              <button
                type="button"
                class="send f13 ml10"
                :disabled="flag"
                @click="phoneCaptcha()"
              >
                {{ content }}
              </button>
            </Col>
          </Row>
          <Row>
            <Col :span="16">
              <img
                src="~/assets/images/security-verification-code.png"
                alt=""
                class="icon"
              />
              <form-item label="验证码：" prop="img_code">
                <Input
                  v-model="formData.img_code"
                  placeholder="请输入验证码"
                  type="text"
                />
              </form-item>
            </Col>
            <Col :span="8">
              <div class="yzmBox">
                <img
                  :src="ImgCaptcha"
                  class="objectCover cursor"
                  @click="imgCaptcha"
                />
              </div>
            </Col>
          </Row>
          <Row type="flex" justify="space-around">
            <Col :span="12">
              <div class="submit cursor" @click="submit">提交</div>
            </Col>
          </Row>
        </Form>
      </div>
      <div class="success" v-else-if="active === 1">
        <img src="~/assets/images/change-success.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Col, Form, FormItem, Input, Row, Step, Steps } from "element-ui";
import MStep from "@/components/common/m-step/MStep";
import { updateMobile, getImgCaptcha, getPhoneCaptcha } from "@/request/api";
export default {
  name: "ChangeMobile",
  computed: mapState(["userInfo"]),
  components: { Step, Steps, MStep, Form, Row, Col, FormItem, Input },
  data() {
    return {
      active: 0,
      steps: [{ title: "设置手机" }, { title: "修改成功" }],
      formData: {},
      rules: {
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        sms_code: [
          { required: true, message: "请输入手机验证码", trigger: "blur" }
        ],
        img_code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      ImgCaptcha: "",
      content: "发送验证码",
      totalTime: 60,
      flag: false
    };
  },
  created() {
    this.imgCaptcha();
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    phoneCaptcha() {
      let that = this;
      let phone = this.formData.phone;
      if (!phone) {
        that.$toastVant("请填写手机号");
      } else if (
        !/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(
          phone
        )
      ) {
        that.$toastVant("请填写正确的手机号");
      } else {
        getPhoneCaptcha({
          phone: this.formData.phone,
          type: "change_phone"
        }).then(res => {
          if (res.status === 200) {
            this.flag = true;
            this.content = this.totalTime + "s后重新发送";
            let clock = window.setInterval(() => {
              this.totalTime--;
              this.content = this.totalTime + "s后重新发送";
              if (this.totalTime < 0) {
                window.clearInterval(clock);
                this.content = "重新发送验证码";
                this.totalTime = 60;
                this.flag = false;
              }
            }, 1000);
          } else {
            that.$toast.show(res.message, 1000, false);
          }
        });
      }
    },
    imgCaptcha() {
      getImgCaptcha()
        .then(res => {
          this.ImgCaptcha = res.data.captcha;
          this.formData.key = res.data.key;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    submit() {
      let that = this;
      this.$refs.form.validate(async res => {
        if (!res) return;
        await updateMobile(that.formData)
          .then(res => {
            if (res.status === 200) {
              const info = that.userInfo;
              info.phone = that.formData.phone;
              that.setUserInfo(info);
              that.active = 1;
            } else {
              that.formData = {};
              that.imgCaptcha();
            }
          })
          .catch(err => {
            this.$message.error(err.message);
          });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
@import "~@/assets/style/cover.scss";

.change-mobile {
  background-color: #fff;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .wrap {
    width: 500px;
    margin-bottom: 40px;
  }

  .content {
    margin-bottom: 120px;
    .yzmBox {
      width: 100%;
      padding-left: 10px;
      height: 40px;
    }
    .input-area {
      width: 400px;

      ///deep/ .el-form-item__label:before {
      //  display: inline;
      //  content: url("~@/assets/images/security-old-pwd.png");
      //  position: absolute;
      //  left: -10px;
      //}

      /deep/ .el-col {
        .icon {
          position: absolute;
          left: -25px;
          top: 10px;
        }
      }

      .send {
        width: 100px;
        height: 40px;
        border-radius: 10px;
        background-color: $theme-color-1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        cursor: pointer;
        padding: 0;
      }
      .send:disabled {
        background: #aaa;
      }
      .submit {
        width: 200px;
        height: 40px;
        border-radius: 10px;
        background-color: $theme-color-1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-top: 80px;
        margin-bottom: 200px;
        cursor: pointer;
      }
    }

    .success {
      padding-top: 40px;
      margin-bottom: 200px;
    }
  }
}
</style>
